<template>
  <section class="todoapp">
    <hm-header @dealadd="add"></hm-header>
    <hm-main  
    :list="showlist"
    @dealrem="rem" 
    @dealxuan="xuan"
    @dealchange="change"></hm-main>
    <hm-footer :list="list"  @dealdel="del" :status="status" @statusevent="status=$event" v-show="list.length"></hm-footer>
  </section>
</template>

<script>
const obj= {
        "#/": "all",
        "#/completed": "done",
        "#/active": "undone",
      };
import HmHeader from './components/hm-header.vue'
import HmMain from './components/hm-main.vue'
import HmFooter from './components/hm-footer.vue'
export default {
  components: {
    HmHeader,
    HmMain,
    HmFooter
  },
  data(){
    return{
      list:JSON.parse(localStorage.getItem('listt'))||[],
      status:obj[location.hash]||'all',
    }
  },
  computed:{
    showlist(){
      if(this.status==="all"){
        return this.list
      }else if(this.status==="done"){
        return this.list.filter(item=>item.done===true)
      }else{
        return this.list.filter(item=>item.done===false)
      }
    }
  },
  watch:{
    list(val){
      localStorage.setItem('listt',JSON.stringify(val))
    }
  },
  methods:{
    rem(id){
      this.list.splice(this.list.findIndex(item=>item.id===id),1)
    },
    change(id){
      this.list.find(item=>item.id===id).done=!this.list.find(item=>item.id===id).done
    },
    add(name){
      const id=this.list.length?this.list.slice(-1)[0].id+1:1
      this.list.push({
        id,
        name,
        done:false
      })
    },
    xuan(done){
      this.list.forEach(item=>item.done=done)
    },
    /* del(){
      this.list.forEach((item,index)=> 
      item.done===true&&this.list.splice(index,1))
    } */
    del(){
      this.list=this.list.filter(item=>item.done===false)
    },
    /* allselect(){
      this.status='all'
    },
    going(){
      this.status='going'
    },
    alldone(){
      this.status='done'
    }, */
  }
}
</script>

<style></style>
